<script setup>
import { ref } from 'vue'
import { useUserInfoStore } from '@/stores/userInfo.js'
import { userUpdateService } from '@/api/user';
import { ElMessage } from 'element-plus';

const genderOptions = ref([
  { label: '男', value: '男' },
  { label: '女', value: '女' }
]);

const userInfoStore = useUserInfoStore();
const userInfo = ref({...userInfoStore.info});

//调用修改接口
const userUpdate = async()=>{
    let result = await userUpdateService(userInfo.value);
    if(result.code === 0){
        ElMessage.success('修改成功');
        //pinia中的值也修改
        userInfoStore.setInfo(userInfo.value)
    }
    else{
        ElMessage.error('修改失败');
    }
    await workCustomList();
}
</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>基本资料</span>
            </div>
        </template>
        <el-row>
            <el-col :span="12">
                <el-form :model="userInfo" label-width="100px" size="large">
                    <el-form-item label="用户编号">
                        <el-input v-model="userInfo.userId" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="用户名称">
                        <el-input v-model="userInfo.userName" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="userInfo.password" ></el-input>
                    </el-form-item>
                       <el-form-item label="真实姓名" prop="realName">
                        <el-input v-model="userInfo.realName"></el-input>
                    </el-form-item>
                    <el-form-item label="地址" prop="address"> 
                        <el-input v-model="userInfo.address"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="userInfo.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                        <el-radio-group v-model="userInfo.sex">
                            <el-radio v-for="(item, index) in genderOptions" :key="index" :value="item.value">{{ item.label }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="年龄" prop="age">
                        <el-input v-model="userInfo.age"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="userUpdate">提交修改</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </el-card>
</template>
